<!-- JQVMap -->
<link rel="stylesheet" th:href="@{admin/plugins/jqvmap/jqvmap.min.css}">

<style>
    #newEmailsInfoContent{
        position: fixed;
        bottom: 10px;
        right: 10px;
    }
    .email-title,.email-text{
        width: 90%;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .email-date{
        height: 18px;
    }
    .alert{
        overflow: hidden;
        transition: all 0.2s;
        animation-timing-function: ease-in-out;
        box-shadow: 5px 5px 5px rgba(130, 130, 130, 0.5);
    }
</style>
<section class="content">
    <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3 id="receiveEmailNumber">0</h3>

                        <p>邮件数量</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a href="#mailbox/normal" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3 id="sendEmailNumber">0</h3>

                        <p>已发送数量</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="#mailbox/send" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
<!--            <div class="col-lg-3 col-6">-->
<!--                &lt;!&ndash; small box &ndash;&gt;-->
<!--                <div class="small-box bg-warning">-->
<!--                    <div class="inner">-->
<!--                        <h3 th:text="${statistic.lookCount}">44</h3>-->

<!--                        <p>访问次数</p>-->
<!--                    </div>-->
<!--                    <div class="icon">-->
<!--                        <i class="ion ion-person-add"></i>-->
<!--                    </div>-->
<!--                    <a href="#articles" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; ./col &ndash;&gt;-->
            <div class="col-lg-6 col-6">
                <!-- small box -->
                <div class="small-box bg-danger">
                    <div class="inner" style="height:112px">
                        <div class="h5 float-left">当前城市：
                            <span id="nowProvince"></span>省
                            <span id="nowCity"></span>市
                        </div>
                        <div class="float-right">
                            <span>当前天气状况：</span>
                            <span id="temperature"></span><i>°</i>
                            <span id="weather"></span>
                            <img width="100" height="100" src="https://img.jumdata.com/weather-icon/d00.png" id="weather_pic" />
                        </div>

                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a href="#" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
        </div>
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
            <section class="col-lg-12 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-chart-pie mr-1"></i>
                            收发活跃度统计
                        </h3>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content p-0">
                            <!-- Morris chart - Sales -->
                            <div class="chart tab-pane active" id="revenue-chart"
                                 style="position: relative; height: 400px;">
<!--                                <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>-->
                                <div id="main" style="height: 100%;width: 100%;"></div>
                            </div>
<!--                            <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">-->
<!--                                <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>-->
<!--                            </div>-->
                        </div>
                    </div><!-- /.card-body -->
                </div>
                <!-- /.card -->

            </section>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- ChartJS -->
<script th:src="@{admin/plugins/chart.js/Chart.min.js}"></script>
<!-- JQVMap -->
<script th:src="@{admin/plugins/jqvmap/jquery.vmap.min.js}"></script>
<script th:src="@{admin/plugins/jqvmap/maps/jquery.vmap.world.js}"></script>
<!-- Sparkline -->
<script th:src="@{admin/plugins/sparklines/sparkline.js}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script th:src="@{admin/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script>
<script>
    $(function (){
        let weather_data;
       $.ajax({
           url: '/weather',
           method: 'POST',
           type: 'json',
           success: function (data) {
               let json = eval("(" + data +")");
               weather_data = json["data"];
               $('#nowProvince').text(weather_data['province']);
               $('#nowCity').text(weather_data['city']);
               $('#temperature').text(weather_data['now']['temperature']);
               $('#weather').text(weather_data['now']['weather']);
               $('#weather_pic').attr("src",weather_data['now']['weather_pic']);
           }
       });
    });
</script>
<!-- dashboard -->
<script type="text/javascript" th:inline="javascript">
    var lookCountByDay = [[${statistic.lookCountByDay}]]
    var userCountByDay = [[${statistic.userCountByDay}]]

    $(function () {
        //获取收发邮件的统计信息
        $.ajax({
            url:'/mailbox/emailInfo_count',
            method: 'Post',
            success:function (data) {
                // console.log(data);
                let receive = data['receive'];
                let send = data['send'];
                $('#receiveEmailNumber').text(receive);
                $('#sendEmailNumber').text(send);
            },
            error: function (err){
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    });
</script>
<script th:src="@{admin/js/dashboard.js}"></script>
<script th:src="@{admin/plugins/echarts/echarts.min.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
$(function (){
    let startDate = new Date(2022, 7, 28);
    let oneDay = 24 * 3600 * 1000;
    var date = [];
    var now = new Date(startDate);
    let spam = [];
    let normal = [];
    for (let i = 1; i < 31; i++) {
        date.push([now.getFullYear(), now.getMonth(), now.getDate()].join('/'));
        now = new Date((startDate -= oneDay));
        spam.push(0);
        normal.push(0);
    }
    date.reverse();
    // 获取近30天的邮件图表数据
    $.ajax({
        url:'/mailbox/emailInfoIn_30day',
        method: 'Post',
        success:function (data) {
            // console.log(data);
            spam = data['spam'].reverse();
            normal = data['norm'].reverse();
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(getOption(date,spam,normal));
        },
    });
})



    function getOption(date,spam,norm) {
        option = {
            title: {
                text: '近一个月邮件数据'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['普通邮件', '垃圾邮件']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    start: 0,
                    end: 100
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '普通邮件',
                    type: 'line',
                    smooth: true,
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    color: '#83c4fb',
                    data: norm
                },
                {
                    name: '垃圾邮件',
                    type: 'line',
                    smooth: true,
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    color: '#ffea8a',
                    data: spam
                },
            ]
        };
        return option;
    }

</script>
